<script setup>
import { useTagStore } from '@/store/tags'
// import axios from 'axios'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const tagStore = useTagStore()

// mock登录模拟
// const login = async () => {
//   const { data } = await axios.post('/api/login')
//   console.log(data)
// }
</script>

<template>
  <!-- <el-button @click="login">login</el-button> -->
  <el-tag
    class=".el-tag"
    type="success"
    v-for="(item, index) in tagStore.tagList"
    :key="index"
    @close="tagStore.removeTag(item)"
    :effect="route.path === item.path ? 'dark' : 'light'"
    @click="router.push(item.path)"
    :closable="index !== 0"
    hit
  >
    {{ item.name }}
  </el-tag>
</template>

<style lang="scss" scoped>
.el-tag {
  margin-top: 5px;
  margin-right: 10px;
  cursor: pointer;
}
</style>
